<template>
  <div class="introduce_wrapper">
    <div
      class="banner"
      v-if="useWidth.width.value > 750"
      :style="{
        background: 'url(' + background.imageUrl + ')  no-repeat center',
      }"
    >
<!--      <div class="width">-->
<!--        <h2>证书验证</h2>-->
<!--      </div>-->
    </div>
    <div
      class="banner"
      v-if="useWidth.width.value <= 750"
      :style="{
        background: 'url(' + background.imagePhone + ')  no-repeat center',
      }"
    >
<!--      <div class="width">-->
<!--        <h2>证书验证</h2>-->
<!--      </div>-->
    </div>
    <div class="breadcrumb">
      <div class="width">
        <div class="news_list_content_breadcrumb">
          <t-breadcrumb>
            <t-breadcrumb-item to="/dashboard/base"> 首页 </t-breadcrumb-item>
            <t-breadcrumb-item>证书验证</t-breadcrumb-item>
          </t-breadcrumb>
        </div>
      </div>
    </div>
    <div class="introduce_conten">
      <h3 class="title">
        证书验证
        <span></span>
      </h3>
      <div class="width">
        <!--  <t-form
          class="signUp_form"
          ref="form"
          :model="formData"
          :rules="rules"
          :label-width="6"
        >
          <t-row>
            <t-col :flex="2.4">
              <t-form-item name="certificate">
                <t-select
                  v-model="formData.certificate"
                  placeholder="请选择获奖年份"
                  class="demo-select-base"
                  clearable
                  filterable
                >
                  <t-option
                    v-for="(item, index) in options"
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                  >
                    {{ item.label }}
                  </t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :flex="2.4">
              <t-form-item name="certificate">
                <t-select
                  v-model="formData.certificate"
                  class="demo-select-base"
                  placeholder="请选择获奖类型"
                  clearable
                  filterable
                >
                  <t-option
                    v-for="(item, index) in options"
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                  >
                    {{ item.label }}
                  </t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :flex="2.4">
              <t-form-item name="certificate">
                <t-select
                  v-model="formData.certificate"
                  class="demo-select-base"
                  placeholder="姓名/单位名称"
                  clearable
                  filterable
                >
                  <t-option
                    v-for="(item, index) in options"
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                  >
                    {{ item.label }}
                  </t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :flex="2.4">
              <t-form-item name="fullName">
                <t-input v-model="formData.fullName" placeholder="证件号码" />
              </t-form-item>
            </t-col>
            <t-col :flex="2.4">
              <t-button class="submit" type="submit" @click="onSubmit"
                >上传</t-button
              >
            </t-col>
          </t-row>
        </t-form> -->
        <t-row class="form_box">
          <t-col :span="9">
            <dynamic-form
              v-model="formData"
              :form-items="formItems"
              :form-attribute="formAttribute"
              @get-form-ref="
                (formDom) => {
                  formRef = formDom;
                }
              "
            />
          </t-col>
          <t-col :span="3">
            <div class="button_box">
              <t-button class="submit" type="submit" @click="onSubmit"
                >证书验证</t-button
              >
            </div>
          </t-col>
        </t-row>
        <p>请您填写正确的姓名、证件号码和证书编号进行证书验证。</p>
        <t-dialog
          header=""
          v-model:visible="searchFlag"
          width="380px"
          style="text-align: center"
        >
          <template #default>
            <ul
              v-if="listData.card != null && listData.title != null"
              style="line-height: 40px; font-weight: bold; text-align: left"
            >
              <li>姓名：{{ listData.title }}</li>
              <li>证件号码：{{ listData.card }}</li>
              <li>证书编号：{{ listData.bookNumber }}</li>
              <li>年度：{{ listData.year }}</li>
              <li>发证日期：{{ listData.sendDate }}</li>
              <li><span style="color: red">注：核验结果有效</span></li>
            </ul>
            <ul v-else>
              <li>未查询到该信息</li>
            </ul>
          </template>
          <template #footer>
            <!-- 自定义按钮 -->
            <div style="text-align: center">
              <t-button
                style="margin: auto"
                theme="primary"
                @click="searchFlag = false"
                >关闭</t-button
              >
            </div>
          </template>
        </t-dialog>
      </div>
    </div>
    <footer class="copyright"></footer>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { MessagePlugin, FormRule } from "tdesign-vue-next";
import { DynamicForm } from "@/libs/components/dynamicForm";
import {
  formAttribute,
  formData,
  formItems,
  formRef,
  // resetFormData,
} from "./constants";
import { backImage, searchBook } from "@/api";
import { useWindowResize } from "@/utils/useWindowResize";
const searchFlag = ref(false);
const useWidth = useWindowResize();
const onSubmit = async () => {
  const result = await formRef.value?.validate();
  if (result !== true) {
    return;
  }
  // 调用接口
  postData();
};
const listData = ref({});

const postData = () => {
  searchBook(formData.value).then((e) => {
    listData.value = e;
    searchFlag.value = true;
  });
};

// 背景图片
const background = ref({ imagePhone: null, imageUrl: null });
backImage("book_background").then((e) => {
  background.value = e;
});
</script>
<script setup lang="ts"></script>

<style lang="less" scoped>
@import url("./index.less");
.t-dialog__footer {
  text-align: center;
}
</style>
